<template>
  <div>
    <el-form ref="EditForm" :model="formModel" label-width="90px" :rules="validate">
      <el-row>
        <el-col :span="12">
          <el-form-item label="上级部门:" prop="parentId">
            <el-tree-select
              ref="treeSelect"
              v-model="formModel.parentId"
              :styles="styles"
              :select-params="selectParams"
              :tree-params="treeParams"
              @searchFun="_searchFun"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门名称:" prop="name">
            <el-input
              v-model="formModel.name"
              placeholder="部门名称"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门排序:">
            <el-input-number v-model="formModel.sort" style="width: 100%;" :step="1" :max="100" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人:" prop="liaison">
            <el-input
              v-model="formModel.liaison"
              placeholder="负责人"
              maxlength="15"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话:">
            <el-input
              v-model="formModel.phone"
              placeholder="电话"
              show-word-limit
              maxlength="15"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮件:">
            <el-input
              v-model="formModel.email"
              placeholder="邮件"
              show-word-limit
              maxlength="20"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <el-radio-group v-model="formModel.status">
              <el-radio v-for="(name,value,index) of getSystemDictionariesByType('USESTATUS')" :key="index" :label="value" border>{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listToTree } from 'tree-walk-util'
import { findTreeREQ } from '@/api/system/department'
export default {
  name: 'EditForm',
  components: { },
  props: {
    formModel: {
      type: Object
    },
    validate: {
      type: Object
    }
  },
  data() {
    return {
      styles: {
        width: '100%'
      },
      selectParams: {
        multiple: false,
        clearable: true,
        placeholder: '请输入内容'
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        'highlight-current': true,
        'check-strictly': true,
        'default-expand-all': true,
        'expand-on-click-node': false,
        data: [],
        props: {
          children: 'children',
          label: 'text',
          disabled: 'disabled',
          value: 'value'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      'getSystemDictionariesByType': 'dictionaries/getSystemDictionariesByType'
    })
  },
  mounted() {
    findTreeREQ().then((data) => {
      if (this.formModel.id && data && data.length > 0) {
        const temp = data.find(v => {
          return v.value === this.formModel.id
        })
        if (temp) temp.disabled = 'true'
      }
      const tempData = listToTree(data, 'value', 'parentId', 'children').children
      this.$refs.treeSelect.treeDataUpdateFun(tempData)
    })
  },
  methods: {
    _searchFun(value) {
      this.$refs.treeSelect.filterFun(value)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
